<template>
  <div>
    <Card>
      <p slot="title">
        <span class="box-header">部位安全评估分析清单</span>
      </p>

      <ul class="toolbar" slot="extra">
        <li class="item">
          <Input
            v-model="keyword"
            placeholder="请输入部位名称开始搜索"
            style="width:260px"
            :search="true"
            enter-button="立即搜索"
            size="default"
            @on-search="renderTable(0)"
          />
        </li>
      </ul>

      <Table :columns="tableColumn" :data="tableData"></Table>
      <Divider />
      <Page :total="pageCount" show-elevator @on-change="renderTable" />
      <Spin v-if="loading.table" fix size="large"></Spin>
    </Card>

    <Modal v-model="showModal" :title="modalTitle" width="1300" scrollable :footer-hide="true">
      <sv-SIS-modal ref="report"></sv-SIS-modal>
    </Modal>
  </div>
</template>

<script>
window.$vue = {};
import axios from "axios";
import sv_SIS_modal from '@/views/data-statics/SIS/sv-SIS-modal';

export default {
  data() {
    return {
      tableColumn: [
        {
          title: "序号",
          key: "index",
          align: "center",
          width: 80
        },
        {
          title: "操作",
          key: "operation",
          align: "center",
          width: 160,
          render(h, params) {
            return h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "default"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: t => {
                    //数据在params.row里
                    window.$vue.openModal(params.row);
                  }
                }
              },
              "查看评估报告"
            );
          }
        },
        { title: "部位名称", key: "comName", align: "center" },
        {
          title: "安全评分",
          key: "score",
          align: "center",
          width: 100,
          render(h, params) {
            let color = null;
            let number = params.row.score;
            if (number > 99) {
              color = "#19be6b";
            } else if (number <= 99 && number >= 80) {
              color = "#e6b600";
            } else if (number < 80 && number >= 60) {
              color = "#fa7c00";
            } else if (number < 60) {
              color = "#ed4014";
            } else {
              color = "#333";
            }
            return h("span", { style: { color: color } }, params.row.score);
          }
        },
        {
          title: "预警等级",
          key: "level",
          width: 100,
          align: "center",
          render(h, params) {
            let text = null;
            let color = null;
            let number = params.row.score;
            if (number > 99) {
              text = "安全";
              color = "#19be6b";
            } else if (number <= 99 && number >= 80) {
              text = "轻微告警";
              color = "#e6b600";
            } else if (number < 80 && number >= 60) {
              color = "#fa7c00";
              text = "中等告警";
            } else if (number < 60) {
              color = "#ed4014";
              text = "严重告警";
            } else {
              color = "#333";
              text = "无告警信息";
            }

            return h("span", { style: { color: color } }, text);
          }
        },
        { title: "所属区划", key: "districtName", align: "center" },
        {
          title: "消防安全负责人",
          key: "chargerName",
          align: "center",
          width: 160
        },
        { title: "联系方式", key: "chargerPhone", align: "center" }
      ],
      tableData: [],
      pageCount: 0,

      keyword: null,
      
      loading: {
        safeAbstract: false,
        dangerDistrict: false,
        dangerClassify: false,
        resolve: false,
        table: false
      },
      totalCount: 0,
      warnedCount: 0,
      warnedType: null,
      resolvePercentage: 0,
      showModal: false,
      modalData: null,
      modalTitle: null
    };
  },
  components: {
    "sv-SIS-modal": sv_SIS_modal
  },
  created() {
    window.$vue = this;
  },
  destroyed() {
    window.$vue = {};
  },
  methods: {

    renderTable(index) {
      this.loading.table = true;
      let params = {
        pageIndex: index,
        pageSize: 25,
        /* TODO:等GetAQXXNew改成实时数据后，再把这里的dateShift(-1) 改成dateShift(0)*/
        indexDate: this.dateShift(0),
        bwmc: this.keyword
      };
      axios
        .get(this.URLHEAD_TA + "ICoordinates", { params: params })
        .then(res => {
          let json = res.data;
          this.tableData = json.Data.map((o, i) => {
            return {
              index: i + 1,
              comName: o.MC === "" ? "暂无信息" : o.MC,
              districtName: o.SSQH === "" ? "暂无信息" : o.SSQH,
              chargerName: o.AQFZR === "" ? "暂无信息" : o.AQFZR,
              chargerPhone: o.PHONE === "" ? "暂无信息" : o.PHONE,
              score: o.FS,
              level: o.YHDJ,
              comID: o.Data_ID,
              countryName: o.Country
            };
          });
          this.pageCount = json.count;
          this.loading.table = false;
        });
    },
    openModal(data) {
      this.showModal = true;
      //this.modalData = data;
      this.modalTitle = `${data.comName} - 单位安全评估报告`;
      this.$refs.report.query(data);
    }
  },
  mounted() {
    this.renderTable(0);
  }
};
</script>

<style scoped>

</style>
